<template>
  <div>
    <el-upload
      v-if="!disabled"
      :action="action"
      :headers="uploadheaders"
      :data="uploaddata"
      :file-list="fileList"
      :show-file-list="false"
      :before-upload="beforeAvatarUpload"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :accept="accept"
    >
      <el-button
        size="small"
        type="primary"
      >{{ title }}</el-button>
      <div v-if="tip_show" slot="tip">上传中...</div>
    </el-upload>
    <el-row>
      <el-col :span="24">
        <div
          v-for="item in fileList"
          :key="item.type"
        >
          <el-card
            class="box-card"
            shadow="hover"
          >
            <div class="flex padding-right-sm">
              <a v-if="!item.isImg" :href="item.previewPath" target="_blank" :download="item.name" class="flex">
                <el-image
                  style="width:50px;height:50px;padding:10px;"
                  :src="require('@/assets/images/doc.png')"
                />
                <div class="title flex-sub text-left">{{ item.name }}</div>
              </a>
              <div v-else class="flex">
                <el-image
                  style="width:50px;height:50px;padding:10px;"
                  :src="item.previewPath"
                  :preview-src-list="srcList"
                />
                <div class="title flex-sub text-left">{{ item.name }}</div>
              </div>
              <el-button
                v-if="!disabled"
                type="text"
                @click="deleteInvoiceImg(item.key)"
              ><i class="el-icon-delete" />删除</el-button>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: '点击上传'
    },
    domain: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: false
    },
    accept: {
      type: String,
      default: '.*'
    },
    action: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tip_show: false,
      uploadheaders: { Authorization: getToken() }, // 上传header
      uploaddata: { dir: 'bill' }, // 参数
      invoiceImgFile: [],
      fileList: this.data.map(item => {
        return {
          key: item.key ? item.key : new Date().getTime() + '_' + Math.ceil(Math.random() * 99999),
          previewPath: item.previewPath,
          isImg: item.isImg,
          name: item.name,
          status: item.status ? item.status : 'success',
          filePath: item.filePath
        }
      }),
      srcList: []
    }
  },
  watch: {
    data: {
      deep: true,
      handler(obj) {
        this.fileList = obj.map(item => {
          return {
            key: item.key ? item.key : new Date().getTime() + '_' + Math.ceil(Math.random() * 99999),
            previewPath: item.previewPath,
            isImg: item.isImg,
            name: item.name,
            status: item.status ? item.status : 'success',
            filePath: item.filePath
          }
        })
        this.srcList = []
        obj.forEach(element => {
          if (element.isImg) {
            this.srcList.push(element.previewPath)
          }
        })
      }
    }
  },
  created() {
    this.srcList = []
    this.data.forEach(element => {
      if (element.isImg) {
        this.srcList.push(element.previewPath)
      }
    })
  },
  methods: {
    beforeAvatarUpload(file) {
      this.tip_show = true
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isLt2M) {
        this.$message({
          message: '上传文件大小不能超过 10MB!',
          type: 'warning'
        })
        this.tip_show = false
      }
      return isLt2M
    },
    deleteInvoiceImg(key) {
      this.fileList.splice(this.fileList.findIndex(item => item.key === key), 1)
      this.$emit('update:data', this.fileList)
    },
    uploadSuccess(res, file) {
      console.log(res)
      const { name, previewPath, filePath, fileType } = res.Data
      const key = new Date().getTime() + '_' + Math.ceil(Math.random() * 99999)
      this.fileList.push({
        key: key,
        name: name,
        previewPath: previewPath,
        filePath: filePath,
        fileType: fileType,
        status: res.status,
        isImg: fileType.indexOf('image') >= 0 || false
      })
      if (fileType.indexOf('image') >= 0) {
        this.srcList.push(previewPath)
      }
      console.log('this.fileList', this.fileList)
      setTimeout(() => {
        this.tip_show = false
        this.$emit('update:data', this.fileList)
      }, 200)
    },
    uploadError(err, file, fileList) {
      this.$message.error('上传失败')
      this.tip_show = false
      console.log(err)
    }
  }
}
</script>
<style lang='scss' scoped>
.icon-ssl {
  font-size: 100px;
}
::v-deep.el-link--inner {
  color: #409eff;
}
::v-deep.el-image .el-image-viewer__wrapper .el-icon-circle-close {
  color: #f5f8fa;
}
</style>
